<template>
    <div class="home">
        <el-container>
            <el-header>
                <Header />
            </el-header>
            <el-container>
                <el-aside width="250px">
                    <Nav />
                </el-aside>
                <el-main>
                    <Breadcrumb />
                    <div class="scroll-area">
                        <RouterView />
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import Header from "@/components/layouts/Header.vue"
import Nav from "@/components/layouts/Nav.vue"
import Breadcrumb from "@/components/Breadcrumb/index.vue";


</script>

<style lang="less" scoped>
.home {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    color: #242424;

    .el-header {
        padding: 0;
        background-color: #409eff;
        height: 70px;
    }

    .el-aside {
        background-color: #304156;
        color: #fff;
        height: calc(100vh - 70px);

        // 处理滚动条
        &::-webkit-scrollbar {
            width: 0;
        }
    }

    .el-main {
        background-color: #fff;
        height: calc(100vh - 70px);

        .scroll-area {
            height: calc(100vh - 145px);
            overflow: auto;

            &::-webkit-scrollbar {
                width: 0;
            }
        }
    }
}
</style>